<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>List</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/layui/css/layui.css" media="all">
  </head>
  <body>
    <div>欢迎：${loginUser.realName}</div>
    <div>
      <form class="layui-form" action="">
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">真实姓名：</label>
            <div class="layui-input-block">
              <input class="layui-input" name="realName" id="realName" autocomplete="off">
            </div>
          </div>

          <div class="layui-inline">
            <label class="layui-form-label">角色：</label>
            <div class="layui-input-block">
              <select name="roleId" lay-filter="aihao">
                <option value=""></option>
                <option value="1">管理系统员</option>
                <option value="2">店长</option>
                <option value="3">店员</option>
              </select>
            </div>
          </div>

          <div class="layui-inline">
            <div class="layui-input-block">
              <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">搜索</button>
            </div>
          </div>
        </div>
      </form>

      <table class="layui-hide" id="test" lay-filter="test"></table>
    </div>

    <script type="text/html" id="toolbarDemo">
      <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">新增</button>
      </div>
    </script>

    <script type="text/html" id="barDemo">
      <a class="layui-btn  layui-btn-normal layui-btn-xs" lay-event="view">查看</a>
      <a class="layui-btn  layui-btn-normal layui-btn-xs" lay-event="view2">异步查看</a>
      <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

    <script src="${pageContext.request.contextPath}/statics/layui/layui.js" charset="utf-8"></script>

    <script>
      layui.use(['table','form','jquery'], function(){
        var table = layui.table;
        var form = layui.form;
        var $ = layui.$;

        var tableIns = table.render({
          elem: '#test'
          ,url: '${pageContext.request.contextPath}/user/list'
          ,toolbar: '#toolbarDemo'
          ,cols: [[
            {field:'id', width:80, title: '编号'}
            ,{field:'account', width:180, title: '账号'}
            ,{field:'realName', width:180, title: '真实姓名'}
            ,{field:'roleId', width:180, title: '角色'}
            ,{field:'sex', title: '性别', width: 80}
            ,{field:'age', width:80, title: '年龄'}
            ,{field:'phone', width:180, title: '电话'}
            ,{fixed: 'right', title:'操作', minWidth: 125, toolbar: '#barDemo'}
          ]]
          ,page: true
        });

        // 工具栏事件
        table.on('toolbar(test)', function(obj){
          switch(obj.event){
            case 'add':
              window.open('toadd')
              break;
          };
        });

        //触发单元格工具事件
        table.on('tool(test)', function(obj){ // 双击 toolDouble
          var data = obj.data;
          console.log(obj)
          if(obj.event === 'view'){
            // window.open('view?id=1')
            window.open('view/'+data.id)
          } else if(obj.event === 'view2'){

            // 发送请求
            $.get('view2/'+data.id,function (data) {
              console.log(data)
            })


          }else if(obj.event === 'del'){
            layer.confirm('真的删除行么', function(index){
              // 发送删除请求
              $.get('delete/'+data.id,function (data) {
                  console.log(data)
                  //关闭提示
                  layer.close(index);
                  if (data==='1'){
                    location.reload();
                  } else {
                    alert('删除失败')
                  }
              })
            });
          } else if(obj.event === 'edit'){
            window.open('toupdate/'+data.id)
            // layer.open({
            //   title: '编辑',
            //   type: 1,
            //   area: ['80%','80%'],
            //   content: '<div style="padding: 16px;">自定义表单元素</div>'
            // });
          }
        });


        //监听提交
        form.on('submit(demo1)', function(data){
          console.log(data.field)
          //这里以搜索为例
          tableIns.reload({
            where: { //设定异步数据接口的额外参数，任意设
              realName: data.field.realName
              ,roleId: data.field.roleId
              //…
            }
            ,page: {
              curr: 1 //重新从第 1 页开始
            }
          });
          return false;
        });

      });


    </script>

  </body>
</html>
